{% extends "base.html.twig" %}
{% block title %}Log In
{% endblock %}
{% block head %}
	<link rel="stylesheet" href="../styles/registration.css">
	<link rel="stylesheet" href="https://fonts.google.com/specimen/Source+Sans+Pro?category=Sans+Serif">
	<link rel="stylesheet" href="https://fonts.google.com/specimen/Roboto?category=Sans+Serif#standard-styles">
	<script src="scripts/nav.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	{{ parent() }}
{% endblock %}

{% block content %}

	<section class="section p-5">

		<div class="container">

			<div class="row text-center g-2 mt-5">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<h3 class="h3 card-title" id="exampleModalNavLabel">Log In</h3>
						</div>
						<div class="modal-body">
							<form method="post" enctype="multipart/form-data">

								<div class="form-floating mb-3">
									<input type="email" class="form-control" id="floatingInput" name="email" placeholder="name@example.com">
									<label for="floatingInput">Email</label>
								</div>

								<div class="form-floating mb-3">
									<input type="password" class="form-control" id="floatingPassword" name="password1" placeholder="password">
									<label for="floatingPassword" class="form-label">Password</label>		
								</div>

								<div class="logInButtonBox">
									<button type="submit" class="btn logInButton">Log In</button>
									<br/>
									<a class="logInButtonBox" href="https://travel.fsd01.ca/passreset_request">
									Forgot Password?
									</a>
								</div>
								<div class="redText">{{errors.email}}</div>
								<div class="redText">{{errors.password1}}</div>
							</form>
						</div>
						<div class="modal-footer">
							<a class="logInButtonBox" href="https://travel.fsd01.ca/register">
								<button type="submit" class="btn logInButton">Click here if you're not registered</button>
							</a>
						</div>
					</div>
				</div>
			</div>

		</div>

	</section>

{% endblock %}
